<template>
  <!--     <t-space direction="vertical">

</t-space> -->
  <t-table row-key="index" :data="data" :columns="columns" :stripe="stripe" :bordered="bordered" :hover="hover"
    :table-layout="tableLayout ? 'auto' : 'fixed'" :size="size" :show-header="showHeader" cell-empty-content="-"
    resizable lazy-load>
    <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
    <template #image="{ row }">
      <div>
        <div class="tdesign-demo-image-viewer__base">
          <t-image-viewer :images="[row.image]">
            <template #trigger="{ open }">
              <div class="tdesign-demo-image-viewer__ui-image">
                <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                  <span>
                    <BrowseIcon size="1.4em" /> 预览
                  </span>
                </div>
              </div>
            </template>
          </t-image-viewer>
        </div>
      </div>
    </template>
    <template #gender="{ row }">{{ row.gender == 1 ? '男' : '女' }}</template>
    <template #status="{ row }">
      <t-tag theme="default" v-if="row.status == 1">启用</t-tag>
      <t-tag theme="default" v-else>禁用</t-tag>
    </template>
    <!-- 操作栏 -->
    <template #op="{ row }">
      <div class="operateCon">
        <a class="btn-dl" @click="handleDelete(row)">删除</a>
        <a class="font-bt" @click="openEditDialog(row)">编辑</a>
        <a class="delete" v-if="row.status == 1" @click="handleDisable(row)">禁用</a>
        <a class="delete" v-else @click="handleEnable(row)">启用</a>
      </div>
    </template>
  </t-table>
  <t-pagination v-model="Pagination.pageNum" v-model:pageSize="Pagination.pageSize" :total="total"
    @page-size-change="onPageSizeChange" @current-change="onCurrentChange" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return [];
    }
  },
  Pagination: {
    type: Object,
    default: () => {
      return {
        pageNum: 1,
        pageSize: 10
      };
    }
  },
  total: {
    type: Number,
    default: () => {
      return 0;
    }
  }
})
const emit = defineEmits(['query', 'openEditDialog', "handleDelete","handleDisable","handleEnable"])


//表头
const columns = ref([
  { colKey: 'rowIndex', title: "序号" },
  { colKey: 'image', title: '护理图片' },
  { colKey: 'name', title: '护理项目名称' },
  { colKey: 'price', title: '价格' },
  { colKey: 'unit', title: '单位' },
  { colKey: 'orderNo', title: '排序' },
  { colKey: 'creator', title: '创建人' },
  { colKey: 'createTime', title: '创建时间' },
  { colKey: 'status', title: '状态' },
  { colKey: 'op', title: '操作' },
])


const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref('medium');
const showHeader = ref(true);


const onPageSizeChange = (size) => {
  emit('query')
};

const onCurrentChange = (index, pageInfo) => {
  emit('query')
};
const openEditDialog = (row) => {
  emit('openEditDialog', row)
}
const handleDelete = (row) => {
  emit('handleDelete', row)
}
const handleDisable = (row)=>{
    emit('handleDisable', row)   
}
const handleEnable = (row)=>{
    emit('handleEnable', row)
}
</script>